<template>
<div class="head-date-cp">
    <div class="top">
        15:16
    </div>
    <div class="two">
        2021/12/29
    </div>
</div>
</template>

<script>
/*
 头部时间组件
 */
export default {
    name: 'HeadDate',
    data() {
        return {
            date:'',
        };
    },
    created(){

    },
    methods: {
    }
}
</script>

<style scoped lang="scss">
.head-date-cp{
    --head-height: 65px;
    --head-border-color: #c5c5c5;
    --head-border-radius:12px;
    display: flex;
    height: fit-content;
    justify-content: space-between;
    align-items: center;
    width:580px;
    height: var(--head-height);
    backdrop-filter: blur(5px);
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid var(--head-border-color);
    border-radius: var(--head-border-radius);
    position: relative;
    text-align: left;
    >.left-img{
        width: 40px;
        height: 40px;
        cursor: pointer;
        border-radius: var(--head-border-radius);
    }
    >.right-container{
        display: flex;
        align-items: center;
        >.item{
            margin-left: 15px;
            font-size: 15px;
            color: rgb(42, 50, 65);
        }
        >.active-item{
            position: relative;
            z-index: 0;
            &::after{
                content: '';
                position: absolute;
                left: -5px;
                bottom: -2px;
                width: 70%;
                height: 10px;
                // background-color: rgb(0, 213, 142);
                background-color: rgb(214, 214, 214);
                z-index: -1;
                border-radius: 3px;
            }
        }
        >.more-bt{
            font-size: 14px;
            cursor: pointer;
            margin-left: 15px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            border: 1px solid var(--head-border-color);
            border-radius: 10px;
            padding: 3px;
        }
    }
    >.more-container{
        display: grid;
        position: absolute;
        top: calc(var(--head-height) + 5px);
        right: 0;
        background-color: white;
        padding: 10px 0;
        box-sizing: border-box;
        border: 1px solid var(--head-border-color);
        border-radius: var(--head-border-radius);
        font-size: 14px;
        >.item{
            padding: 5px 10px;
            transition: all 0.2s;
            cursor: pointer;
            &:hover{
                background-color: rgb(242, 242, 242);
            }
        }
        >.active-item{
            background-color: rgb(242, 242, 242);
        }
    }
}
</style>
